<template>
  <div class="yygh_search re">
    <ul class="fl">
      <li v-for="(value,index) in menu" @click="active = index" :key="index">
        <router-link :to="value.path" :class="{ hover:index == active }">{{value.name}}</router-link>
      </li>
    </ul>
    <ul class="fr" v-show="showsearch">
      <li>
        <el-input v-model="input"  style="width:230px;" placeholder="请输入医生姓名/拼音缩写" @change="queryDoctors"></el-input>
      </li>
      <li>
            <el-button type="default"  @click="goSearchResult()">搜索医生</el-button>
          </li>
    </ul>
    <div ref="searchList" class="search-list" v-if="lists && lists.length > 0">
      <a href="javascript:;" v-for="list in lists" @click="goDoctorPage(list)" :key="list.doctorName">
        {{list.doctorName}} <small>{{list.speciality}}</small>
      </a>
      <a href="javascript:;" @click="goSearchResult()">查看更多结果> </a>
    </div>
  </div>
</template>

<script>
import {commonAjax, ORG_ID, PLATFORM_PREFIX} from '../api/api'
export default {
  data () {
    return {
      input: '',
      lists: [],
      active: this.activeitem
    }
  },
  props: {
    menu: {
      default () {
        return [
          {name: '预约挂号', path: '/yygh'},
          {name: '我的预约', path: '/personal/history'}
        ]
      }
    },
    showsearch: {
      default () {
        return true
      }
    },
    activeitem: {
      default () {
        return 0
      }
    }
  },
  mounted () {
    let _this = this
    document.onclick = function () {
      _this.input = ''
      _this.lists = []
    }
  },
  methods: {
    queryDoctors () {
      this.timer && clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.getData()
      }, 800)
    },
    getData () {
      this.$store.commit('UPDATE_LOADING')
      commonAjax(
        [ORG_ID, this.input, 1], `${PLATFORM_PREFIX}.registrationService`,
        'queryDocter'
      ).then(res => {
        this.$store.commit('UPDATE_LOADING')
        if (res.data.body && res.data.body.length > 8) {
          res.data.body = res.data.body.slice(0, 8)
        }
        this.lists = res.data.body
      }).catch(err => {
        console.warn(err)
      })
    },
    goSearchResult () {
      if (!this.input.trim()) {
        return
      }
      this.$router.push(`/yygh/searchResult?key=${this.input.trim()}`)
    },
    goDoctorPage (doctor) {
      this.$router.push({
        path: '/yygh/doctor',
        query: {
          localDeptId: doctor.localDeptId,
          localDoctorId: doctor.localDoctorId
        }
      })
    }
  }
}
</script>
